(function () {
  const DESIGN_WIDTH = 1920;
  const DESIGN_HEIGHT = 1080;

  const btnVWVH = document.getElementById('btnVWVH');
  const btnScale = document.getElementById('btnScale');
  const btnREM = document.getElementById('btnREM');

  function setActive(mode) {
    [btnVWVH, btnScale, btnREM].forEach(b => b && b.classList.remove('active'));
    if (mode === 'vwvh' && btnVWVH) btnVWVH.classList.add('active');
    if (mode === 'scale' && btnScale) btnScale.classList.add('active');
    if (mode === 'rem' && btnREM) btnREM.classList.add('active');
    document.body.classList.remove('vwvh-mode', 'scale-mode', 'rem-mode');
    document.body.classList.add(`${mode}-mode`);
  }

  // ============== 三种方案入口 ==============
  function applyLayout(mode) {
    localStorage.setItem('bigscreen-mode', mode);
    setActive(mode);
    if (mode === 'vwvh') applyVWVH();
    if (mode === 'scale') applyScale();
    if (mode === 'rem') applyREM();
  }

  // 方案一：vw/vh（逐项自适应）
  // 思路：页面布局尽量使用百分比/弹性，高宽按设计稿转百分比。
  // 这里 Demo 的布局已是弹性 + 百分比，因此仅需清除 transform 与 rem。
  function applyVWVH() {
    const app = document.getElementById('app');
    if (!app) return;
    clearREM();
    // 占满视口，逐项适配由布局的百分比/弹性完成
    app.style.position = 'fixed';
    app.style.left = '0';
    app.style.top = '0';
    app.style.width = '100vw';
    app.style.height = '100vh';
    app.style.transform = 'none';
    resizeCharts();
  }

  // 方案二：scale（整页缩放 contain）
  function applyScale() {
    const app = document.getElementById('app');
    if (!app) return;
    clearREM();
    // 恢复设计稿画布尺寸
    app.style.width = DESIGN_WIDTH + 'px';
    app.style.height = DESIGN_HEIGHT + 'px';
    app.style.position = 'absolute';
    app.style.left = '50%';
    app.style.top = '50%';
    const sx = window.innerWidth / DESIGN_WIDTH;
    const sy = window.innerHeight / DESIGN_HEIGHT;
    const scale = Math.min(sx, sy);
    app.style.transform = `translate(-50%, -50%) scale(${scale})`;
    resizeCharts();
  }

  // 方案三：rem + vw（按宽度设置根字号，布局用 rem）
  function applyREM() {
    const app = document.getElementById('app');
    if (!app) return;
    const base = (window.innerWidth / DESIGN_WIDTH) * 100; // 10rem=视口宽，若基准100
    document.documentElement.style.fontSize = base + 'px';
    // 画布按 rem 表示：1920px -> 19.2rem, 1080px -> 10.8rem
    app.style.width = '19.2rem';
    app.style.height = '10.8rem';
    app.style.position = 'absolute';
    app.style.left = '50%';
    app.style.top = '50%';
    app.style.transform = 'translate(-50%, -50%)';
    resizeCharts();
  }

  function clearREM() {
    document.documentElement.style.fontSize = '';
  }

  function onResize() {
    const mode = localStorage.getItem('bigscreen-mode') || 'scale';
    applyLayout(mode);
  }

  // ============== 图表示例 ==============
  let chartLeft, chartCenter, chartRight;
  function initCharts() {
    const domLeft = document.getElementById('chart-left');
    const domCenter = document.getElementById('chart-center');
    const domRight = document.getElementById('chart-right');
    if (window.echarts) {
      chartLeft = echarts.init(domLeft);
      chartCenter = echarts.init(domCenter);
      chartRight = echarts.init(domRight);

      chartLeft.setOption({
        title: { text: '折线趋势', textStyle: { color: '#cfe2ff' } },
        grid: { left: 28, right: 12, top: 32, bottom: 22 },
        xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], axisLine: { lineStyle: { color: '#6a86d1' } }, axisLabel: { color: '#a8c1ff' } },
        yAxis: { type: 'value', axisLine: { lineStyle: { color: '#6a86d1' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } }, axisLabel: { color: '#a8c1ff' } },
        series: [{ type: 'line', data: [120,132,101,134,90,230,210], smooth: true, areaStyle: { opacity: 0.15 } }]
      });

      chartCenter.setOption({
        title: { text: '柱状对比', left: 'center', textStyle: { color: '#cfe2ff' } },
        grid: { left: 36, right: 24, top: 56, bottom: 28 },
        xAxis: { type: 'category', data: ['A','B','C','D','E'], axisLine: { lineStyle: { color: '#6a86d1' } }, axisLabel: { color: '#a8c1ff' } },
        yAxis: { type: 'value', axisLine: { lineStyle: { color: '#6a86d1' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } }, axisLabel: { color: '#a8c1ff' } },
        series: [{ type: 'bar', data: [23,45,12,56,38], itemStyle: { color: '#5c7fff' }, barWidth: 28 }]
      });

      chartRight.setOption({
        title: { text: '饼图占比', textStyle: { color: '#cfe2ff' } },
        tooltip: { trigger: 'item' },
        legend: { bottom: 0, textStyle: { color: '#a8c1ff' } },
        series: [{ type: 'pie', radius: ['35%', '60%'], data: [
          { value: 40, name: '类型1' },
          { value: 20, name: '类型2' },
          { value: 25, name: '类型3' },
          { value: 15, name: '类型4' }
        ] }]
      });
    }
  }

  function resizeCharts() {
    chartLeft && chartLeft.resize();
    chartCenter && chartCenter.resize();
    chartRight && chartRight.resize();
  }

  // 事件
  window.addEventListener('resize', onResize);
  window.addEventListener('orientationchange', onResize);
  window.addEventListener('DOMContentLoaded', function () {
    initCharts();
    const saved = localStorage.getItem('bigscreen-mode') || 'scale';
    setActive(saved);
    applyLayout(saved);
  });

  btnVWVH && btnVWVH.addEventListener('click', () => applyLayout('vwvh'));
  btnScale && btnScale.addEventListener('click', () => applyLayout('scale'));
  btnREM && btnREM.addEventListener('click', () => applyLayout('rem'));
})();


